<template>
	<view class="page">
		 <up-navbar   title="我的客户"  :autoBack="true"  safeAreaInsetTop placeholder >   </up-navbar>
		
		<view style="background-color: #fff;    height: 100rpx; ">
			<view style="width: 95%; margin: 0 auto;">			
				<view class=" " >
					<view class="search-form round" @click="symtz">						
						<image class="" src="/static/Frame@3x.png" alt="" style="width:35rpx;height:35rpx; margin-left: 20rpx;" />
						<input style="width: 73%;"  v-model="search" :adjust-position="false" type="text" placeholder="搜索" confirm-type="search">				
						<view class="action">
							<button class="sjign" style=" color: #fff;">搜索</button>
						</view> </input>
					</view>
					
				</view>
				
				
				
			
				
				
			</view>
		</view>
		 
		<view class="yanshi" v-for="(item, index) in list" :key="index" @click="xinagqing(item.id)">
			<view style=" width: 95%; margin: 0 auto; ">
				<view style="width: 100%; display: flex;height: 150rpx;" >
					<view class="neirngssf">
						<image class="icon1" :src="item.avatar" alt="" />
					</view>
					<view class="neirngs">
					
						<view style="line-height: 87rpx;"><text>{{item.nickname}}</text></view>
						<view><text style="color: #999999;">{{item.mobile}}</text></view>
					</view>
					<view class="neirngs" style="align-items: center; display: flex; justify-content: flex-end;"  @click.stop="bianjizil(item.id)">
						<view style=" display: flex;align-items: center;justify-content: center; ">
							<text style="color: #999999;">编辑资料</text>
						
						<image class="" src="/static/Frameyoux.png" alt="" style="width:35rpx;height:35rpx; margin-left: 20rpx;" />
						
						<!-- <text style="color: #999999;">>></text> -->
						
						
						
						</view>
					</view>
				</view>
				<view style="width: 100%; display: flex; text-align: center;flex-wrap: wrap;" >
				
					<view class=" linglein "  v-for="(items, index) in item.service_labels_name" :key="index">						
						<view class="linglein_meir"  ><text style="color: #FF9839;" >{{items}}</text></view>						
					</view>
					
				
					
				</view>
				
			</view>
		</view>
		
		
	
	</view>
</template>

<script>
		import request from '@/utils/request'
	export default {
		data() {
			return {
				search:'',
				// DataList:'https://cdn.uviewui.com/uview/album/1.jpg',
			page: 1,
			limit: 10,
				indexList:[{
						value: 0,
						name: '香港移民'
					},
					{
						value: 1,
						name: '香港留学'
					},
					{
						value: 2,
						name: '企业补贴'
					},
					{
						value: 3,
						name: '代办公司'
					},
				],
				list:[]
			}
		},
		onLoad() {
		
		},
		onShow() {
			
			this.page=1
			console.log(this.page)
			this.fenhong()
		},
		methods: {
			fenhong(){
					var insg = uni.getStorageSync('userinfo')
					
					console.log(insg,'1111')
					this.$request({
						url: '/api/User/getMyUserLists',
						header:"application/x-www-form-urlencoded",
						data: {							
							type:insg.user_type,
							page: this.page,
							limit: this.limit,
							search:this.search
						}
					}).then(res => {
						if (res.code == 1) {
							console.log(res)
							
							res.data.forEach((item, index) => {
								item.avatars=request+item.avatar
							});	
							this.list=res.data
							
						} else {
							
						
						}
					})
				
			},
			onReachBottom() {
				console.log(111)
				var insg = uni.getStorageSync('userinfo')
				var that = this
				uni.showLoading({
					title: '加载中...',
					mask: true //遮蔽层
				})
				console.log(1231123);
				that.page += 1;				
				this.$request({
					url: '/api/User/getMyUserLists',
					header: "application/x-www-form-urlencoded",
					data: {
						type: insg.user_type,
						page: that.page,
						limit: that.limit,
					}
				}).then(res => {
					if (res.code == 1) {
						var feilei_neirong =  res.data.forEach((item, index) => {
						 	item.avatars=request+item.avatar
						 });	
						console.log(res)
						if (feilei_neirong.length != 0) {
			
							feilei_neirong.forEach(rect => {
			
								that.list.push(rect);
							});
							console.log(that.list = that.list)
			
						
							uni.hideLoading()
						} else {
							uni.showToast({
								title: '没有更多的数据了',
								icon: 'none',
								duration: 2000
							});
						}
						// res.data.forEach((item, index) => {
						// 	item.avatars=request+item.avatar
						// });	
						// this.list=res.data
					} else {
			
			
					}
				})
			},
			symtz(){
				uni.navigateTo({
					url: '/pages/my/kehu/wode_kehu_ss/wode_kehu_ss',
				})
			},
			jings(item) {
				console.log('item', item);
			},
			xinagqing(id){
					 console.log(id,'item');
					
					 uni.navigateTo({
					 	url: '/pages/my/kehu/wode_kehu_xiangqing/wode_kehu_xiangqing?id='+id,
					 })
			},
			bianjizil(id){
				console.log(id,'item');
					 uni.navigateTo({
					 	url: '/pages/my/kehu/wode_kehu_xiugai/wode_kehu_xiugai?id='+id,
					
					 })
			},
		},
		onReachBottom() {
			this.onReachBottom()
		}
		
	}
</script>

<style lang="scss" scoped>
	
.sjign{
	position: relative;
	    border: 0rpx;
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    box-sizing: border-box;
	    padding: 0 30rpx;
	    font-size: 28rpx;
	    height: 50rpx;
	    line-height: 1;
	    text-align: center;
	    text-decoration: none;
	    overflow: visible;
	    margin-left: initial;
	    -webkit-transform: translate(0rpx, 0rpx);
	    transform: translate(0rpx, 0rpx);
	    margin-right: initial;
		  color: #fff;
		    background-image: linear-gradient(to bottom, #FF9839, #FF7139);
		    color: #333333;
			border-radius: 65rpx;
			height: 64rpx;

}
button::after{ border: none;} 
 .search-form {
	       background-color: #f5f5f5;
	       line-height: 32px;
	       height: 64rpx;
	       font-size: 24rpx;
	       color: #333;
	       flex: 1;
	       display: flex;
	       align-items: center;
	       margin: 0 30rpx;
	       border-radius: 60rpx;
	}
	// .cu-bar.fixed, .nav.fixed {
	//     position: fixed;
	//     width: 100%;
	//     top: 0;
	//     z-index: 1024;
	//     box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	// }
	// .bg-white {
	//     background-color: #ffffff;
	//     color: #666666;
	// }
	// .cu-bar {
	//     display: flex;
	//     position: relative;
	//     align-items: center;
	//     min-height: 100rpx;
	//     justify-content: space-between;
	// }

	.linglein_meir{
		background-color: #FFF6EE; border-radius: 10rpx;
	}
	.linglein{
		width: 30%;padding: 10rpx;
		line-height: 80rpx;
	}
	.page{
		background: #F8F8F8;
	}
	.yanshi{
		width: 95%; margin: 0 auto;   margin-top: 20rpx; background-color: #fff; border-radius: 20rpx;
	}
	.neirngssf{
		width: 20%;
		padding: 10rpx;
		
	}
	.neirngs{
		width: 36%;
		padding: 10rpx;
		
		
		 
	}
	.icon1{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		
	}
</style>
